<template>
    <div class="payglobal">
        <div class="paycard">
            <div class="paytitle">微信支付</div>
            <div>距离二维码过期还剩
                <span style="color: red;">{{ djstime }}</span>
                ，过期后请刷新页面重新获取
            </div>
            <div style="text-align: center;"> 价格<span style="color: red;">{{ price }}</span> </div>

            <div style="text-align: center;"> <img :src="surl" />

            </div> <!-- <img :src="url" style="width: 100px;height: 100px;" alt=""> -->
            <div style="text-align: center;">请使用微信扫码</div>
        </div>
    </div>
</template>
<script setup>
import { useRoute } from "vue-router"
import { useRouter } from 'nuxt/app';
import QRCode from 'qrcode'
const router = useRouter();
const route = useRoute()
const djstime = ref("");
const timer = ref(null);
const data = ref({});
const price = ref("");
const surl = ref("")
onMounted(() => {
    getdjs(1800);
    getpay()
    if (timer.value) clearInterval(timer.value)
    timer.value = setInterval(() => {
        getispay()

    }, 2000)



})

const getispay = async () => {
    const { data } = await useHttp("", "order/iswxpay", {
        method: "post",
        body: {
            no: route.params.id
        }
    })
    if (data.value.trade_state == "SUCCESS") {
        handleSuccess()
    }

}

const getpay = async () => {
    const { data } = await useHttp("", "/order/wxpay", {
        method: "post",
        body: {
            no: route.params.id
        }
    })
    console.log(data.value);
    price.value = data.value.price
    QRCode.toDataURL(data.value.code_url, {
        width: 280,
        height: 280,
        margin: 2
    })
        .then(url => {
            surl.value = url
        })


}
const handleSuccess = () => {
    if (timer.value) clearInterval(timer.value)
    setTimeout(() => {
        router.push("/")
    }, 2000);
}
const getdjs = (t) => {
    let minutes = "";
    let seconds = "";
    let timer = setInterval(() => {
        minutes = parseInt(t / 60, 10);
        seconds = parseInt(t % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        djstime.value = minutes + ":" + seconds;

        t--;

    }, 1000);

}


</script>
<style scoped>
.paytitle {
    color: #000;
    font-size: 20px;
}

.payglobal {
    width: 100%;
    height: auto;
}

.paycard {
    width: 450px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
}
</style>